<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>组件高级用法__异步组件</title>
</head>
<body>

<div id="app">
    <my-component></my-component>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    /**
     * 当你的工程足够大，使用的组件足够多时，是时候考虑性能问题，因为一开始把所有的组件都加载是没必要的一笔开销。
     * Vue.js允许将组件定义为一个工厂函数，动态地解析组件。Vue.js只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。
     *
     **/
     Vue.component("my-component",function (resolve,reject) {
         window.setTimeout(function () {
             resolve({
                 template:"<div>我是异步渲染的！</div>"
             });
         },2000);
     });

    var app = new Vue({
        el:"#app",
    })

</script>
</body>
</html>